import { useEffect, useState } from "react";
import { delCartAPI, loadCartAPI } from "../../services/goods";
import {
  NavBar,
  SwipeAction,
  Image,
  Dialog,
  Checkbox,
  Button,
  Toast,
} from "antd-mobile";
import { useNavigate } from "react-router-dom";
import { dalImg } from "../../utils/tools";

function Cart() {
  const [show, setShow] = useState(false);
  const [data, setData] = useState([]);
  //value为选中的数据id
  const [value, setValue] = useState([]);
  const nav = useNavigate();
  //返回上一级
  const back = () => {
    nav(-1);
  };
  const loadData = () => {
    //获取购物车数据
    loadCartAPI().then((res) => {
      // console.log(res.data.list);
      setData(res.data.list);
      setValue([]);
    });
  };
  useEffect(() => {
    loadData();
  }, []);
  useEffect(() => {
    if (value.length) {
      setShow(true);
    } else {
      setShow(false);
    }
  }, [value]);
  return (
    <div className="cart">
      <NavBar
        onBack={back}
        style={{
          boxShadow: "rgb(255 0 148 / 21%) 0px 1px 5px 0px inset ",
          marginBottom: "10px",
        }}
      >
        我的购物车
      </NavBar>
      <div className="cart-list" style={{ padding: "5px" }}>
        {show ? (
          <Button
            color="danger"
            size="middle"
            style={{
              backgroundColor: "rgb(255 87 34 / 88%)",
              padding: "3px",
              position: "fixed",
              right: "10px",
              zIndex: "1000",
            }}
            onClick={async () => {
              if (value.length > 0) {
                const result = await Dialog.confirm({
                  content: "是否确认删除?",
                });
                if (result) {
                  await delCartAPI(value.join(","));
                  loadData();
                }
              } else {
                Toast.show("未选中");
              }
            }}
          >
            删除选中
          </Button>
        ) : null}

        <Checkbox
          style={{ margin: "10px 0" }}
          indeterminate={value.length > 0 && value.length < data.length}
          checked={value.length === data.length && value != 0}
          onChange={(checked) => {
            //选中状态变化时的回调函数
            if (checked) {
              setValue(
                data.map((item) => {
                  return item.id;
                })
              );
            } else {
              setValue([]);
            }
          }}
        >
          全选
        </Checkbox>
        <Checkbox.Group
          //value属性值为选中的选项数组
          value={value}
          onChange={(v) => {
            //v表示选中的id组成的数组，和Checkbox中的value值关联
            setValue(v);
          }}
        >
          {data.map((item) => (
            //value属性值为标识值id，用于Checkbox.Group模式的选中值
            <Checkbox key={item.id} value={item.id} style={{ margin: "5px 0" }}>
              <SwipeAction
                rightActions={[
                  {
                    key: "delete",
                    text: "删除",
                    color: "danger",
                    onClick: async () => {
                      const result = await Dialog.confirm({
                        content: "确认删除",
                      });
                      if (result) {
                        await delCartAPI(item.id);
                        loadData();
                      }
                    },
                  },
                ]}
              >
                <div
                  style={{
                    padding: "10px",
                    boxShadow: "rgb(255 0 148 / 21%) 0px 1px 5px 0px inset",
                    display: "flex",
                  }}
                >
                  <Image
                    onClick={() => {
                      nav("/goods/" + item.medicine.id);
                    }}
                    style={{
                      borderRadius: "10px",
                      width: "100px",
                      height: "100px",
                    }}
                    src={dalImg(item.medicine.image)}
                  />
                  <div style={{ margin: "10px" }}>
                    <p
                      style={{
                        marginBottom: "10px",
                        width: "200px",
                        whiteSpace: "nowrap",
                        textOverflow: "ellipsis",
                        overflow: "hidden",
                      }}
                    >
                      {item.medicine.name}
                    </p>
                    <p style={{ marginBottom: "10px" }}>数量：{item.amount}</p>
                    <p
                      style={{
                        width: "200px",
                        whiteSpace: "nowrap",
                        textOverflow: "ellipsis",
                        overflow: "hidden",
                      }}
                    >
                      主治：{item.medicine.desc}
                    </p>
                  </div>
                </div>
              </SwipeAction>
            </Checkbox>
          ))}
        </Checkbox.Group>
      </div>
    </div>
  );
}

export default Cart;
